import React from 'react';
import PropTypes from 'prop-types';
import './index.scss';
import { imgHost } from '../../util/costant';
// 书页
class JokeItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  render() {
    const joke = this.props.data;
    const litpic = imgHost + joke.litpic[0][0].split(',')[0];
    let classN = 'joke-item';
    classN = this.props.activeIndex >= this.props.index ? `${classN} active` : classN;
    return (
      <div className={classN} style={{ zIndex: this.props.zIndex }}>
        <h3 className="joke-title">
          {joke.title.rendered}
        </h3>
        <div className="joke-content" dangerouslySetInnerHTML={{ __html: joke.content.rendered }} />
        <div className="joke-img">
          <img src={litpic} alt={joke.title.rendered} />
        </div>
        <div className="page-munber">
          第{this.props.index}页
        </div>
        <span className="prev controlIcon" onClick={this.props.handlePrev} style={this.props.index <= 1 ? { display: 'none' } : {}}>上一页</span>
        <span className="next controlIcon" onClick={this.props.handleNext} style={this.props.index <= this.props.length ? {} : { display: 'none' }}>下一页</span>
      </div>
    )
  }
}
export default JokeItem;
JokeItem.propTypes = {
  data: PropTypes.objectOf(Object),
  activeIndex: PropTypes.number,
  zIndex: PropTypes.number,
  handleNext: PropTypes.func,
  handlePrev: PropTypes.func,
  index: PropTypes.number,
  length: PropTypes.number,
}
